<template>
  <div class="full-text">
    <div class="full-name">设备全览图</div>
    <div class="full-line"></div>
    <div class="full-action">
      <div class="Number">
        <dv-digital-flop :config="config" style="width: 200px; height: 45px" />
      </div>
      <div class="glassNumber">今日已生产</div>
    </div>
  </div>
</template>

<script>
import { listGlass } from "@/api/assembly/glass";
import { mapState } from "vuex";
export default {
  data() {
    return {
      timer: null,
    };
  },
  methods: {
    getAllGlass() {
      listGlass().then((res) => {
        this.config = {
          number: [res.total],
          style: {
            fontSize: 50,
            fill: "#3de7c9",
          },
        };
      });
    },
  },
  mounted() {},
  computed: {
    ...mapState({
      glassList: (state) => {
        return state.Glass.glass || [];
      },
    }),
    config() {
      return this.glassList.length == 0
        ? {
            number: [0],
            style: {
              fontSize: 10,
              fill: "#3de7c9",
            },
          }
        : {
            number: [this.glassList.length],
            style: {
              fontSize: 50,
              fill: "#3de7c9",
            },
          };
    },
  },
};
</script>

<style lang="less" scoped>
.full-text {
  width: 400px;
  display: flex;
  flex-direction: column;
  .full-name {
    text-align: center;
    font-size: 38px;
    letter-spacing: 30px;
    font-weight: bold;
    background-image: linear-gradient(to right, #007aff, #00dfff, #007aff);
    color: transparent;
    -webkit-background-clip: text;
    transform: translateX(10px);
  }
  .full-line {
    width: 100%;
    height: 3px;
    background-image: linear-gradient(to right, #007aff, #00dfff, #007aff);
  }
  .full-action {
    display: flex;
    align-items: center;
    flex-direction: column;
    margin-top: 20px;
    .glassNumber {
      flex: 1;
      font-size: 18px;
      font-weight: bold;
      letter-spacing: 24px;
      margin-top: 10px;
      span {
        margin-right: 5px;
      }
    }
    .Number {
      font-size: 18px;
      font-weight: bold;
    }
  }
}
</style>